//获取搜索按钮
var searchBtn = document.querySelector('.bigbox .content .line-three :nth-child(3)');
console.log(searchBtn);
//获取输入框
var inputEle = document.querySelector('.bigbox .content .line-three :nth-child(2)');
console.log(inputEle);


//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
        render( res.data.list )
        console.log(res.data);
    })
}
//给table-body绑定点击事件(删除)
var tablebody = document.querySelector('.bigbox .content .table .table-body ');
// console.log(tablebody);
tablebody.onclick = (e)=>{
    // console.log(e.target.tagName);
    // console.log(e.target.classList);
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('delete') ){
        console.log(1111);
        console.log(e.target);

        axios.post('/user/delete',{ name: e.target.dataset.name }).then((res)=>{

            console.log(res.data);
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data){
    var str = ''
    str = data.map((item,index)=>{
        return `<ul class="row">
        <li>□</li>
        <li>${item.id}</li>
        <li>${item.code}</li>
        <li>${item.name}</li>
        <li>${item.order}</li>
        <li>${item.status}</li>
        <li>${item.time}</li>
        <li>
            <span class="amend">修改</span>
            <span class="delete" " data-name="${item.name}">删除</span>
        </li>
    </ul>`
    }).join('')

    if( str == '' ){
        str = '<div style="text-align:center;color:red">未查询到数据!</div>'
    }
    document.querySelector('.table .table-body').innerHTML = str ;
}
page = 1
// 获取上一页和下一页的标签
var prev = document.querySelector('.bigbox .content .line-five .left')
var next = document.querySelector('.bigbox .content .line-five .right')

prev.onclick=function(){
    if(page>1){
        axios.get('/user/list',{params:{page:--page,count:5}}).then((res)=>{
            render( res.data.list );
        })
    }
}

next.onclick=function(){
    if(page<4){
        axios.get('/user/list',{params:{page:++page,count:5}}).then((res)=>{
            render( res.data.list );
        })
    }
}
//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page:1,count:5 }  } ).then((res)=>{
    //调用render方法, 传入后端返回的数据 渲染列表
    render( res.data.list );
    console.log(res.data);
})